<meta charset="utf-8">
<meta name="viewport"
    content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<style>
    html,
    body,
    #root,
    .app {
        position: relative;
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
        color: #333;
        background: #fdfdfd;
        overscroll-behavior: none;
    }

    .app {
        transform-style: preserve-3d;
    }

    .viewer {
        position: relative;
        width: 100%;
        height: 100%;
    }

    .viewport {
        width: 400px;
        /* height: 600px; */
        border: 1px solid #eee;
        box-sizing: border-box;
    }

    .reset {
        position: absolute !important;
        background: #333;
        width: 30px;
        height: 30px;
        z-index: 1;
        border-right: 1px solid #444;
        border-bottom: 1px solid #444;
        box-sizing: border-box;
        cursor: pointer;
    }

    .guides {
        position: absolute !important;
        top: 0;
        left: 0;
        transform: translateZ(1px);
    }

    .guides.horizontal {
        left: 30px;
        width: calc(100% - 30px);
        height: 30px !important;
    }

    .guides.vertical {
        top: 30px;
        height: calc(100% - 30px);
        width: 30px !important;
    }

    /* 
.scena-vertical .scena-guide {
height: calc(100% + 30px)!important;
top: -30px;
}
.scena-horizontal .scena-guide {
width: calc(100% + 30px)!important;
top: -30px;
} */
    .viewer {
        position: absolute !important;
        left: 30px;
        top: 30px;
        width: calc(100% - 30px);
        height: calc(100% - 30px);
    }

    .viewport {
        text-align: center;
    }

    .viewport p {
        padding: 0;
        margin: 0;
    }

    .buttons {
        padding: 5px;
    }

    .button {
        display: inline-block;
        padding: 10px 20px;
        border: 2px solid #333;
        color: #333;
        font-weight: bold;
        text-decoration: none;
        font-size: 14px;
        letter-spacing: 1px;
        margin: 2px;
    }

    .viewport p.description {
        text-align: left;
        padding: 5px 20px;
        box-sizing: border-box;
    }

    .component {
        display: inline-block;
        padding: 5px;
        margin-bottom: 10px;
    }

    .component p {
        padding: 0;
        margin: 0;
    }

    .component .logo {
        position: relative;
        width: 150px;
        height: 150px;
    }

    .component img {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 100%;
        height: auto;
        max-height: 100%;
        transform: translate(-50%, -50%);
        box-sizing: border-box;
    }

    .component a {
        color: black;
        font-weight: bold;
    }
</style>
<div class="app">
    <div class="reset"></div>
    <div class="guides horizontal"></div>
    <div class="guides vertical"></div>
    <div class="viewer">
        <div class="viewport">
            <p class="logo"><img src="https://daybrush.com/infinite-viewer/images/logo.png" data-moveable /></p>
            <h2 data-moveable>Infinite Viewer</h2>
            <p class="description" data-moveable>Infinite Viewer is Document Viewer Component with infinite scrolling.
            </p>
            <div class="buttons">
                <a href="https://github.com/daybrush/infinite-viewer" class="button">Download</a>
                <a href="https://daybrush.com/infinite-viewer/release/latest/doc" class="button">API</a>
            </div>
            <p class="description" data-moveable>&nbsp;This component can scroll up and down, left and right in the
                negative direction and in the positive direction. &nbsp;It can also be used in combination with
                moveable, selecto, guides.</p>
            <div class="component" data-moveable>
                <p class="logo"><img src="https://daybrush.com/moveable/images/256x256.png" alt="Logo" /></p>
                <p><a href="https://github.com/daybrush/moveable" target="_blank">Moveable</a></p>
            </div>
            <div class="component" data-moveable>
                <p class="logo"><img src="https://daybrush.com/selecto/images/256x256.png" alt="Logo"
                        style="padding: 10px;" /></p>
                <p><a href="https://github.com/daybrush/selecto" target="_blank">Selecto</a></p>
            </div>
            <div class="component" data-moveable>
                <p class="logo"><img src="https://daybrush.com/guides/images/guides.png" alt="Logo" /></p>
                <p><a href="https://github.com/daybrush/guides" target="_blank">Guides</a></p>
            </div>
            <div class="component" data-moveable>
                <p class="logo"><img src="https://daybrush.com/scenejs/images/clapperboard.png" alt="Logo" /></p>
                <p><a href="https://github.com/daybrush/scena" target="_blank">Scena</a></p>
            </div>
        </div>
    </div>
</div>
<!-- <script src="../dist/infinite-viewer.js"></script> -->
<script src="./release/latest/dist/infinite-viewer.js"></script>
<!-- <script src="https://daybrush.com/keycon/release/latest/dist/keycon.pkgd.js"></script> -->
<script src="https://daybrush.com/selecto/release/latest/dist/selecto.js"></script>
<script src="https://daybrush.com/guides/release/latest/dist/guides.js"></script>
<!-- <script src="https://daybrush.com/moveable/release/latest/dist/moveable.js"></script> -->
<!-- <script src="https://daybrush.com/moveable-helper/release/latest/dist/moveable-helper.js"></script> -->
<script>
    let targets = [];

    const horizontalGuides = new Guides(document.querySelector(".guides.horizontal"), {
        snapThreshold: 5,
        snaps: [0, 300, 600],
        displayDragPos: true,
        dragPosFormat: v => `${v}px`,
    }).on("changeGuides", ({ guides }) => {
        moveable.horizontalGuidelines = guides;
    });
    const verticalGuides = new Guides(document.querySelector(".guides.vertical"), {
        type: "vertical",
        snapThreshold: 5,
        snaps: [0, 200, 400],
        displayDragPos: true,
        dragPosFormat: v => `${v}px`,
    }).on("changeGuides", ({ guides }) => {
        moveable.verticalGuidelines = guides;
    });

    const viewer = new InfiniteViewer(
        document.querySelector(".viewer"),
        document.querySelector(".viewport"),
        {
            // usePinch: true,
            // pinchThreshold: 50,
            useMouseDrag: true,
            useWheelScroll: true,
            useAutoZoom: true,
            zoomRange: [0.1, 10],
            maxPinchWheel: 10,
        }
    ).on("dragStart", e => {
        const target = e.inputEvent.target;

        if (target.nodeName === "A") {
            e.stop();
        }
    }).on("scroll", e => {
        const zoom = viewer.zoom;
        horizontalGuides.scroll(e.scrollLeft, zoom);
        horizontalGuides.scrollGuides(e.scrollTop, zoom);

        verticalGuides.scroll(e.scrollTop, zoom);
        verticalGuides.scrollGuides(e.scrollLeft, zoom);
    }).on("pinch", e => {
        const zoom = Math.max(0.1, e.zoom);

        verticalGuides.zoom = zoom;
        horizontalGuides.zoom = zoom;
    });

    requestAnimationFrame(() => {
        viewer.scrollCenter();
    });

    window.addEventListener("resize", () => {
        horizontalGuides.resize();
        verticalGuides.resize();
    });

    document.querySelector(".reset").addEventListener("click", () => {
        viewer.scrollCenter();
    });
</script>
<script async src="https://www.googletagmanager.com/gtag/js?id=G-TRBNXHQ0ZF"></script>
<script>
    window.dataLayer = window.dataLayer || [];
    function gtag() { dataLayer.push(arguments); }
    gtag('js', new Date());
    gtag('config', 'G-TRBNXHQ0ZF');
</script>